<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作
		 append()         功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend()        功能：在匹配元素集合中所有元素的内部开头插入内容
		 
		 after()          功能：在匹配元素集合中所有元素的外部后面插入内容
		 before()         功能：在匹配元素集合中所有元素的外部前面插入内容
		 
		 remove()         功能：移除匹配元素集合中所有元素以及子元素【盒子模型都删掉】
		 empty()          功能：清空匹配元素集合中所有的元素内容【盒子模型不删】
		 
		 replaceWith()
		 -->
	<style>
		button{
			margin: 5px;
			padding: 10px 15px;
			cursor: pointer;
		}
		body{
			margin: 20px;
		}
		#target{
			border: 1px solid red;
			padding: 10px;
			margin-top: 10px;
			margin-left: 5px;
			border-radius:5px ;
		}
		.bgcolor{
			width: 300px;
			height: 300px;
			background-color: #ff0;
			border-radius: 50%;
			display: block;
			background-image: url(../img/图片1.gif);
			background-size:100% 100%;
			color:transparent;
		}
	</style>
	<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
				 <button id="appendBtn">内部末尾插入元素</button>
				 <button id="prependBtn">内部开头插入元素</button>
				 <button id="afterBtn">外部后面插入元素</button>
				 <button id="beforeBtn">外部前面插入元素</button>
				 <button id="removeBtn">删除元素</button>
				 <button id="emptyBtn">清空元素</button>
				 <button id="replaceBtn">替换元素</button>
				 <!-- 目标显示区域-->
				 <div id="target">
					 <p>目标元素的初始段落</p>
					 </div>
					 <!-- 用于插入跟替换的区域-->
				 <div id="newElement" style="display: none;">
					 <p>插入新元素的初始段落</p>
					 </div>
	</body>
<script>
	/* 1.点击   内部末尾插入元素  按钮  p文本后面追加新元素中包含内容操作 */
	$("#appendBtn").click(function(){
		//效果：点击按钮 追加“新元素--自带内容”
		//1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
	var cpe=$("#newElement").clone();
	//clone()创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
	//1.2 自带属性和属性值：隐藏--改成显示
	cpe.css("display","block");
	//1.3将复制出来的新元素，追加给当前元素上
	$("#target").append(cpe);
	});
	/* 2.点击   内部开头插入元素  按钮  p文本前面追加新元素中包含内容操作 */
	$("#prependBtn").click(function(){
   var ppb=$("#newElement").clone();
	ppb.css("display","block");
	$("#target").prepend(ppb);
	});
	/* 3.点击   外部末尾插入元素  按钮  p文本后面追加新元素中包含内容操作 */
	$("#afterBtn").click(function(){
	var ne1=$("#newElement").clone();
	ne1.addClass("bgcolor");
	$("#target").after(ne1);
	});
	/* 4.点击   外部前面插入元素  按钮  生成 圆形，保留背景色，文本不需要，
	                                   背景图300*300*/
	$("#beforeBtn").click(function(){
		var ne1=$("#newElement").clone();
		ne1.css({"width":"300px",
		         "height":"300px",
				 "background-color":"#ff0",
				 "display":"block",
				 "border-radius":"50%",
				 "background-image":"url(../img/图片1.gif)",
				 "background-size":"100% 100%",
				 "color":"transparent"});
		$("#target").before(ne1);
	});							   
       /* 5.点击  删除元素  按钮   页面上所有元素包括子元素全部删除【盒子模型】*/
	   $("#removeBtn").click(function(){
		   $("#target").remove();
	   });
	   /* 6.点击 清空元素  按钮   页面上所有元素当中内容全部删除【盒子模型不删】*/
	   $("#emptyBtn").click(function(){
	   		   $("#target").empty();
	   });
	   /* 7.点击 替换元素 按钮  页面上目标元素替换为新元素*/
	   $("#replaceBtn").click(function(){
		   //克隆 新元素 #newElement【父子级】
		  var c=$("#newElement").clone().css("display","block");
		   //替换 找到 目标元素  替换 新元素 
		   $("#target").replaceWith(c);
	   });
</script>
</html>